<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>选择支付方式</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="./css/ionic-change.css">
    <link rel="stylesheet" href="./css/zf.css">
    <link rel="stylesheet" href="./js/tc/weui2.css">

    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/rem.js"></script>
    <!--弹框-->
    <script type="text/javascript" src="./js/tc/zepto.min.js"></script>
  </head>

  <body style="background-color: #eeeeee;">
    <div class="wxzf1_box">
      <div class="wxzf1_1">
        <span>需支付</span>
        <span> ¥1200</span>
        <span>（原价¥1500)</span>
      </div>
      <div class="weui_cell_switch dikou">
        <div class="weui_cell_hd weui_cell_primary">
          <span class="wxzf1_2">可用积分<span>256</span>分,可抵扣<span>¥3</span></span>
        </div>
        <input class="weui_switch" type="checkbox" />
      </div>
      <div class="wxzf1_3 houjiantou">
        <span>可用优惠券</span>
        <div class="right">
          <span id="btn1" class="kyyhq">可用优惠券3张，请选择</span>
          <img src="./images/left.png" alt="">
        </div>

      </div>
      <div class="wxzf1_4"><span>合计：<span>￥1200</span></span></div>
    </div>
    <div class="wxzf2_1">
      <div class="wxzf2_2">选择以下支付方式</div>
      <div class="wxzf2_3 ">
        <img src="./images/order9.png" />
        <span>微信支付</span>
        <span class="wxzf1 active"></span>
      </div>
      <div class="wxzf2_4">
        <img src="./images/order10.png" />
        <span>余额支付</span>
        <span class="yezf1"></span>
      </div>
      <div class="wxzf2_5">
        <img src="./images/order11.png" />
        <span>月结(合作用户线下支付)</span>
        <span class="yuejie1"></span>
      </div>
    </div>
    <a><button class="xginfo2">确定</button></a>

    <!--余额不足弹框-->
    <!--弹框类型1-->
    <div class="weui_mask weui_mask_visible hide" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
    <div class="weui_dialog weui_dialog_visible hide" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
      <div class="weui_dialog_hd">
        <strong class="weui_dialog_title">确认删除?</strong>
      </div>
      <div class="weui_dialog_bd">您确定要删除吗?</div>
      <div class="weui_dialog_ft">
        <a href="javascript:;" class="weui_btn_dialog default">
          我再想想
        </a>
        <a href="javascript:;" class="weui_btn_dialog primary">
          确定
        </a>
      </div>
    </div>

    <!--底下优惠券弹框-->
    <div class="zhezhao"></div>
    <div class="tkbox">
      <div class="tkguding">
        <div class="tkhead tktitle">
          <p>优惠券<span><img src="./images/tkclose.png" /></span></p>
        </div>
        <div class="tkkyq">可用优惠券</div>
      </div>
      <div class="tkhead">
        <div class="quanbgimg">
          <div class="yhq_con">
            <div class="yhqjine">￥<span>30</span></div>
            <div class="mid">
              <p class="yhqtxt">优惠券</p>
              <p class="dq">2017-05-20到期</p>
            </div>
            <div class="right_time">
              <p class="yhqsytime">剩3日</p>
              <p class="lijisy">立即使用</p>
            </div>
          </div>
          <p class="pinlie">限品类：包车预约</p>
        </div>
      </div>
      <div class="tkhead">
        <div class="quanbgimg">
          <div class="yhq_con">
            <div class="yhqjine">￥<span>30</span></div>
            <div class="mid">
              <p class="yhqtxt">优惠券</p>
              <p class="dq">2017-05-20到期</p>
            </div>
            <div class="right_time">
              <p class="yhqsytime">剩3日</p>
              <p class="lijisy">立即使用</p>
            </div>
          </div>
          <p class="pinlie">限品类：包车预约</p>
        </div>
      </div>
      <div class="tkhead">
        <div class="quanbgimg">
          <div class="yhq_con">
            <div class="yhqjine">￥<span>30</span></div>
            <div class="mid">
              <p class="yhqtxt">优惠券</p>
              <p class="dq">2017-05-20到期</p>
            </div>
            <div class="right_time">
              <p class="yhqsytime">剩3日</p>
              <p class="lijisy">立即使用</p>
            </div>
          </div>
          <p class="pinlie">限品类：包车预约</p>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      $(".wxzf1_3").click(function () {
        $(".zhezhao").show();
        $(".tkbox").stop().animate({
          'bottom': '0rem'
        }, 300);
        $(".tkbox").show();
      })

      $(".zhezhao").click(function () {
        $(".tkbox").stop().animate({
          'bottom': '-19rem'
        }, 300);
        $(".tkbox").hide();
        $(".zhezhao").hide();
      })
      $(".tktitle img").click(function () {
        $(".tkbox").hide();
        $(".zhezhao").hide();
      })
      //点击每一个优惠券 弹框隐藏  得值
      $(".tkhead").click(function () {
        $(".tkbox").stop().animate({
          'bottom': '-19rem'
        }, 300);
        var _this = $(this).children(".quanbgimg").children(".yhqjine").children(".yhqmoney");
        var mon = _this.text();
        $(".kyyhq")[0].innerHTML = '￥' + mon;

        $(".tkbox").hide();
        $(".zhezhao").hide();
      })

      //			微信支付,余额支付,月结
      $(".wxzf2_3").click(function () {
        $(this).children(".wxzf1").addClass("active");
        $(".yezf1").removeClass("active");
        $(".yuejie1").removeClass("active");
      })
      $(".wxzf2_4").click(function () {
        $(this).children(".yezf1").addClass("active");
        $(".wxzf1").removeClass("active");
        $(".yuejie1").removeClass("active");
      })
      $(".wxzf2_5").click(function () {
        $(this).children(".yuejie1").addClass("active");
        $(".wxzf1").removeClass("active");
        $(".yezf1").removeClass("active");
      })

      //余额不足弹框
      $(".xginfo2").click(function () {
        if ($(".yezf1").hasClass("active")) {
          $.confirm("余额不足，请充值", "温馨提示", function () {}, function () {
            //取消操作
          });
        }
        //选择微信支付 进入到支付成功页面
        if ($(".wxzf1").hasClass("active")) {
          window.open("Order_zfsuccess.html");
        }
        //选择月结支付方式
        if ($(".yuejie1").hasClass("active")) {
          window.open("order-yuejie.html");
        }
      })
    })
  </script>

</html>